<template>
	<view>
		<hx-navbar  :border="false"  transparent="hidden"
			  height="140rpx" :back="false"
			 >
			<view style="text-align: center;width: 100%;font-weight: 700;"><text>个人中心</text></view>
			
		</hx-navbar>
		<view style="background: linear-gradient(189.08deg, #DBF9F1 0%, rgba(219, 249, 241, 0) 36.82%), #F3F4F6;height:256rpx;width: 100%;position: fixed;top: 0;"></view>
	
	<view class="container">
		
		<!-- 顶部背景 -->
		<view class="user-section" >
			<view class="user-info-box" @tap="getUserProfile">
				<view v-if="!userinfoshow" class="portrait-box">
					<image class="portrait" :src="defaultFace"></image>
				</view>
				<view v-if="!userinfoshow" class="info-box"><text class="username">请点击授权登录</text></view>
				<view v-if="userinfoshow" class="portrait-box">
					<image class="portrait" :src="userinfo.avatarUrl"></image>
				</view>
				<view v-if="userinfoshow" class="info-box">
					<text class="username">{{ userinfo.nickName }}</text>
				</view>
			</view>
			<!-- <view class="vip-card-box">
				<image class="card-bg" src="../../static/me/logo.jpg" mode="aspectFill"></image>
				<view class="b-btn">立即开通</view>
				<view class="tit">
					<text class="yticon icon-iLinkapp-"></text>
					{{ '开通会员' }}
					<view class="margin-top-sm" style="display: flex; flex-direction: column;align-items:flex-start;">
						<text class="e-m">食小助</text>
						<text class="e-b">开通会员 正在测试开发中</text>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 顶部余额、优惠劵、积分 -->
		<view class="tj-sction">
			
			<view class="tj-item">
				<text class="num">0</text>
				<text class="text-black">优惠券</text>
			</view>
			<view class="tj-item" @click="toMoney()">
				<text class="num">{{ money }}</text>
				<text class="text-black">钱包</text>
			</view>
			<view class="tj-item">
				<text class="num">{{ character }}</text>
				<text class="text-black">积分</text>
			</view>
		</view>
		<view class="riceCard"><image src="/static/me/riceCard.png" mode="widthFix" style="width: 100%;"></image></view>
		<view class="compilations">
			<view class="couponcentre common" @click="toCouponCenter">
				<!-- <image src="/static/me/couponcentre.png" mode="widthFix"></image> -->
				<view class="txt">
					<view class="t1">领券中心</view>
					<view class="t2">领券下单更优惠</view>
				</view>
				<view><image src="/static/me/card1.png" mode="widthFix"></image></view>
			</view>
			<view class="Invitefriends common" @click="toInvitefriends">
				<view class="txt">
					<view class="t1">邀请好友</view>
					<view class="t2">最高30元奖励</view>
				</view>
				<view><image src="/static/me/friends.png" mode="widthFix"></image></view>
			</view>
				
		</view>
		<view class="boxFooter">
			<view class="item" @tap="toHuoma()">
				<image  src="/static/me/group .png"></image>
				<view class="txt">进群福利</view>
			</view>
			<view class="item" @click="toBack()">
				<image src="/static/me/kf.png"></image>
				<view class="txt">问题反馈</view>
			</view>
			<view class="item" @tap="services()">
				<image src="/static/me/attention.png"></image>
				<view class="txt">加入我们</view>
			</view>
			<view class="item">
				<image src="/static/me/map.png"></image>
				<view class="txt">商家入住</view>
			</view>
			<view class="item">
				<image src="/static/me/resource.png"></image>
				<view class="txt">平台资源</view>
			</view>
		</view>
		<!-- 中部信息模块 -->
		<!-- <view class="cover-container" :style="[{ transform: coverTransform, transition: coverTransition }]"
			@touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend"> -->
			<!-- <image class="arc" src="/static/img/user//arc.png"></image> -->

		

			<!-- 中部广告栏 -->
		<!-- 				<view
				class="margin-top-sm"
				style="background-color: #000000; width: 100%; height: auto; display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<image style="width: 100%;" src="../../static/banner3.jpg" mode="widthFix"></image>
			</view>
 -->
			<!-- 用户信息模块 -->
			<!-- <view class="service-box margin-top-sm">
				<view class="text-lg text-bold" style="margin-bottom: 20rpx;">我的服务</view>
				<view class="row"> -->
					<!-- 					<view class="grid" >
						<view class="image"><image src="../../static/me/servise/jfqd.png"></image></view>
						<view class="text-xs">积分签到</view>
					</view> -->
					<!-- 				<view class="grid" @tap="goMyfav()">
						<view class="image"><image src="../../static/me/servise/stxy.png"></image></view>
						<view class="text-xs">我的收藏</view>
					</view> -->
					<!-- 					<view class="grid">
						<view class="image"><image src="../../static/me/servise/nxsc.png"></image></view>
						<view class="text-xs">小助商城</view>
					</view> -->
	</view>
	<!-- 				<view class="grid" @tap="goMyorder()">
						<view class="image">
							<image src="../../static/me/servise/wddd.png"></image>
						</view>
						<view class="text-xs">我的订单</view>
					</view  >
					<view v-if="rank>=2" class="grid"  @tap="goCash()">
						<view class="image"><image src="../../static/me/servise/wdzl.png"></image></view>
						<view class="text-xs">余额提现</view>
					</view>
					<view class="grid" @tap="addresses()">
						<view class="image">
							<image src="../../static/me/servise/shdz.png"></image>
						</view>
						<view class="text-xs">收货地址</view>
					</view>
					<view class="grid" @tap="toHuoma()">
						<view class="image"><image src="../../static/me/servise/nxbz.png"></image></view>
						<view class="text-xs">售后加群</view>
					</view>
					<view class="grid" @click="toBack()">
						<view class="image">
							<image src="../../static/me/servise/lxkf.png"></image>
						</view>
						<view class="text-xs">问题反馈</view>
					</view>
					<view class="grid" @tap="toSetting()">
						<view class="image">
							<image src="../../static/me/servise/clear.png"></image>
						</view>
						<view class="text-xs">清除缓存</view>
					</view>
					<view class="grid" @tap="services()">
						<view class="image">
							<image src="../../static/me/servise/nxbz.png"></image>
						</view>
						<view class="text-xs">加入团队</view>
					</view>
				
				</view>
			</view>
 -->
			<!-- 平台运营模块-->
			<!-- 【2骑手分餐员】楼栋长端、校园骑手端、骑手端
			 【3楼栋长】楼栋长端
			 【6核心负责人端、楼栋长端】核心负责人
			 【4平台管理端】小助福利官、小助客服、总负责人、技术部负责人
			  【5财务管理端】创始人、财务负责人 -->
			  
			  
			<view class="service-box margin-top-sm"  v-if="rank >=2&&school!=-1">
				<view class="text-lg text-bold" style="margin-bottom: 20rpx;">{{listSelect[school].label}}平台运营</view>
				<view class="row">
					<view class="grid" v-if="rank == 6 ||rank == 5 || rank == 4" @tap="attendance(5)">
						<view class="image">
							<image src="../../static/me/servise/loudong.png"></image>
						</view>
						<view class="text-xs">核心负责人端</view>
					</view>
					<view class="grid" v-if="rank == 2||rank == 3||rank == 5" @tap="attendance(0)">
						<view class="image">
							<image src="../../static/me/servise/qishou.png"></image>
						</view>
						<view class="text-xs">校园骑手端</view>
					</view>
					<view class="grid" v-if="rank == 2 || rank == 5 || rank == 4" @tap="attendance(1)">
						<view class="image">
							<image src="../../static/me/servise/qishou.png"></image>
						</view>
						<view class="text-xs">骑手端</view>
					</view>
					<view class="grid" v-if="rank == 4 || rank == 3 || rank == 6 || rank == 5" @tap="attendance(2)">
						<view class="image">
							<image src="../../static/me/servise/loudong.png"></image>
						</view>
						<view class="text-xs">楼栋长端</view>
					</view>
					<view class="grid" v-if="rank == 4 || rank == 5" @tap="attendance(3)">
						<view class="image">
							<image src="../../static/me/servise/yun.png"></image>
						</view>
						<view class="text-xs">平台管理</view>
					</view>
					<view class="grid" v-if="rank == 5" @tap="attendance(7)">
						<view class="image">
							<image src="../../static/me/servise/yun.png"></image>
						</view>
						<view class="text-xs">财务管理</view>
					</view>
					<view class="grid" v-if="rank == 5" @tap="attendance(8)">
						<view class="image">
							<image src="../../static/me/servise/yun.png"></image>
						</view>
						<view class="text-xs">续费管理</view>
					</view>
					<view class="grid" v-if="rank == 5" @tap="attendance(9)">
						<view class="image">
							<image src="../../static/me/servise/yun.png"></image>
						</view>
						<view class="text-xs">学车管理</view>
					</view>
				</view>
			</view>
		<!-- </view> -->
		<!-- 提示弹窗 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	//日期
	import getDateTime from '../../common/getdataTime';
	//数据库引入
	const db = uniCloud.database();
	const dbCmd = db.command;
	//引入全局变量
	let app = getApp();
	import hxNavbar from '@/components/hx-navbar/hx-navbar.vue';
	import listCell from '@/components/mix-list-cell';
	import {
		mapState
	} from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell,
			hxNavbar
		},
		data() {
			return {
				rank: 0,
				kefu: false,
				superguanli: false,
				pageTitle: '我的',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				//用户登陆模块
				userinfoshow: false,
				moving: false,
				money: 0.0,
				character: 0.0,
				guanli: true,
				openid: '',
				islogin: false,
				defaultFace: '/static/img/user/missing-face.png',
				userSettingUrl: '/pages/user/setting/setting',
				userinfo: {},
				memberInfo: {
					face: '',
					nickname: ''
				},
				listSelect:[
							{
								value:'0',
								label:'中南大学南校区',
								timelist: [
									{
										starttime: '11:00~11:20',
										endtime: '最晚10:30关闭'
									},{
										starttime: '11:20~11:40',
										endtime: '最晚10:50关闭'
									},
									{
										starttime: '11:40~12:00',
										endtime: '最晚11:10关闭'
									},
									{
										starttime: '12:00~12:20',
										endtime: '最晚11:30关闭'
									},
									{
										starttime: '12:20~12:40',
										endtime: '最晚11:50关闭'
									},
									{
										starttime: '12:40~13:00',
										endtime: '最晚12:20关闭'
									},
									{
										starttime: '17:00~17:20',
										endtime: '最晚16:30关闭'
									},
									{
										starttime: '17:20~17:40',
										endtime: '最晚16:50关闭'
									},
									{
										starttime: '17:40~18:00',
										endtime: '最晚17:10关闭'
									},
									{
										starttime: '18:00~18:20',
										endtime: '最晚17:50关闭'
									},
									{
										starttime: '18:20~18:40',
										endtime: '最晚18:10关闭'
									},
									{
										starttime: '18:40~19:00',
										endtime: '最晚18:20关闭'
									},
									{
										starttime: '22:20~22:45',
										endtime: '最晚21:40关闭'
									}
								],
								bannerData: [
									{
										page: '/pages/huoma/huoma',
										src: '../../static/index/shouye.png'
									},
									{
										page: '/pages/huoma/huoma',
										src: '../../static/index/shouye.png'
									},
									{
										page: '/pages/store/index?sid=16680806912&delivery=1&sign=4',
										src: '../../static/index/kuaidi.png'
									}
								]
							},
							{
								value:'1',
								label:"中南大学本部校区",
								timelist: [
									{
										starttime: '11:45~12:05',
										endtime: '最晚11:10关闭'
									},{
										starttime: '12:25~12:45',
										endtime: '最晚11:50关闭'
									},
									{
										starttime: '17:45~18:05',
										endtime: '最晚17:10关闭'
									},{
										starttime: '18:25~18:45',
										endtime: '最晚17:50关闭'
									},
								],
								bannerData: [
									{
										page: '/pages/huoma/huoma',
										src: '../../static/index/shouye.png'
									}
								]
							},
							{
				value:'2',
								label:"湖南大学财经校区",
								timelist: [
									{
										starttime: '11:45~12:05',
										endtime: '最晚11:10关闭'
									},{
										starttime: '12:25~12:45',
										endtime: '最晚11:50关闭'
									},
									{
										starttime: '17:45~18:05',
										endtime: '最晚17:10关闭'
									},{
										starttime: '18:25~18:45',
										endtime: '最晚17:50关闭'
									},
								],
								bannerData: [
									{
										page: '/pages/huoma/huoma',
										src: '../../static/index/shouye.png'
									}
								]
							}
							// ,
							// {
							// 	value:'2',
							// 	label:"湖南大学财经校区"
							// }
						],
						school:-1
			};
		},
		onShow() {
			let that = this;
			//查看校区u
			uni.getStorage({
				key: 'school_sxz',
				success(res) {
					that.school = res.data.schoolIndex
					//本部和南校一样对待
					if(that.school==2){
						that.school = 2
					}else{
						that.school = 0
					}
					console.log("校区获取到了",that.school)
				},
				fail(res) {
					that.school =-1
				}
			});
			// 登陆验证
			that.checkLogin();
		},
		onLoad(params) {
			this.login(params);
		},
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.toSetting();
			} else if (index === 1) {
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				uni.navigateTo({
					url: '/pages/notice/notice'
				});
			}
		},
		methods: {		
			login(params){
				let that = this;
				this.superguanli = params.superguanli;
				if (this.superguanli) {
					this.kefu = true;
				}
				this.kefu = params.kefu;
				if (params.code != undefined) {
					var code = params.code;
					var incode = params.inviteCode
					that.islogin = true;
					//A的邀请码是1234  B是新用户
					//前端进来，https://shixiaozhu.nanju.work?incode=1234   代表1234这个人给了将要进入平台的这个人
					var url = 'https://zback.shixiaozhu.work/ShixiaozhuTest/user/weixinCodeShixiaozhu?code=' + code+"&";
					uni.request({
						url: url,
						success(res) {
							uni.showLoading({
								title: '正在登陆中...'
							});
							//判断状态码
							if (res.data.status == 200) {
								console.log('返回结果', res);
								that.openid = res.data.data.openid;
								that.rank = res.data.data.rank;
								//输出rank
								that.userinfo.avatarUrl = res.data.data.headimgurl;
								that.userinfo.nickName = res.data.data.nickname;
								let info = {};
								//构造用户信息
								info.nickName = res.data.data.nickname;
								info.avatarUrl = res.data.data.headimgurl;
								app.globalData.openid = that.openid;
								//说明已经登录或者注册成功了，那就说明可以拿到数据了，然后保存在本地以后对用户进行提醒
								uni.setStorage({
									key: 'user_sxz',
									data: {
										info: info,
										openid: that.openid,
										rank: that.rank
									},
									success(res) {
										that.userinfoshow = true;
										uni.hideLoading();
										uni.showModal({
											title: '登录成功，快去点餐叭~',
											success(res) {
												if (res.confirm) {
													uni.switchTab({
														url: '../../index/index'
													});
												}
											}
										});
									},
									fail() {
										uni.hideLoading();
										uni.showToast({
											title: '网络请求有误'
										});
									}
								});
							} else {
								//说明没有登录成功
								that.userinfoshow = false;
								uni.showModal({
									title: '登录网络异常，请刷新页面重新登录！',
									success(res) {}
								});
							}
						}
					});
				} else {
					console.log('没有登陆');
				}
			},
			toHuoma(){
				uni.navigateTo({
					url: "/pages/newhuoma/newhuoma?schoolIndex="+this.school
				});
			},
			//去领券中心
			toCouponCenter(){
				uni.navigateTo({
					url:'/pages/me/coupon/center'
				})
			},
			toInvitefriends(){
				uni.navigateTo({
					url:'/pages/me/invitefriends/invitefriends'
				})
			},
			//去反馈页面
			toBack(){
				let that = this;
				if (that.userinfoshow) {
					uni.navigateTo({
						url: 'feedback/feedback'
					});
				} else {
					uni.showModal({
						title: '您还没有绑定微信登陆，需要点击登录/注册按钮进行登录？',
						success(res) {}
					});
				}
			},
			goCash(){
				let that = this;
				if (that.userinfoshow) {
					uni.navigateTo({
						url: 'cash/cash?openid=' + that.openid+"&money="+that.money
					});
				} else {
					uni.showModal({
						title: '您还没有绑定微信登陆，需要点击登录/注册按钮进行登录？',
						success(res) {}
					});
				}
			},
			toMoney() {
				let that = this;
				if (that.userinfoshow) {
					uni.navigateTo({
						url: 'moneyorder/moneyorder?openid=' + that.openid 
					});
				} else {
					uni.showModal({
						title: '您还没有绑定微信登陆，需要点击登录/注册按钮进行登录？',
						success(res) {}
					});
				}
			},
			//加入团队
			services() {
				let that = this;
				if (that.userinfoshow) {
					uni.navigateTo({
						url: './teamCheck/teamCheck?openid=' + that.openid +"&rank="+that.rank
					});
				} else {
					uni.showModal({
						title: '您还没有绑定微信登陆，需要点击登录/注册按钮进行登录？',
						success(res) {}
					});
				}
			},
			attendance(index) {
				console.log('index', index);
				let that = this
				var url = '';
				var school = -1;
				var schoolName= ""
				uni.getStorage({
					key: 'school_sxz',
					success(res) {
						school = res.data.schoolIndex
						//本部和南校一样对待
						if(school==2){
							school = 2
						}else{
							school = 0
						}
						switch (index) {
							case 0: {
								url = '../manage/manageDistribution/manageDistribution';
								break;
							}
							case 1: {
								// url= '../manage/manageSchool/manageSchool';
								url = '../manage/manageQs/manageQs';
								break;
							}
							case 2: {
								url = '../manage/manageLou/manageLou';
								break;
							}
							case 3: {
								url = '../manage/manage';
								break;
							}
							case 4: {
								url = '../manage/manageStore/manageStore';
								break;
							}
							case 5: {
								url = '../manage/chargeManage/chargeManage';
								break;
							}					
							case 7: {
								url = '../manage/moneyManage/moneyManage';
								break;
							}
							case 8: {
								url = '../manage/manageXufei/manageXufei';
								break;
							}
							case 9: {
								url = '../manage/manageXueChe/manageXueChe';
								break;
							}
						}
						uni.navigateTo({
							url: url+"?school="+school
						});
					},
					fail(res) {
						uni.showModal({
							title:"温馨提示",
							content:"请选择校区"
						})
					}
				});
			},
			//【----------------我的服务----------------】
			//我的订单
			goMyorder() {
				uni.switchTab({
					url: '../order/order'
				});
			},
			//我的收藏
			goMyfav() {
				//判断登陆
				this.checkLogin();
				uni.navigateTo({
					url: 'myfav/myfav'
				});
			},
			//小助商城

			//联系客服

			//积分签到

			//我的资料

			//收货地址
			addresses() {
				let that = this;
				if (that.userinfoshow) {
					uni.navigateTo({
						url: '../address/address?openid=' + this.openid
					});
				} else {
					uni.showModal({
						title: '您还没有绑定微信登陆，需要点击登录/注册按钮进行登录？',
						success(res) {}
					});
				}
			},
			//商家加盟

			//清除缓存
			toSetting() {
				let that = this;
				setTimeout(() => {
					that.$router.go(0);
				}, 300);
				uni.clearStorage();
				that.$refs.uToast.show({
					type: 'success',
					title: '成功清除缓存',
					complete() {}
				});
			},
			//更多服务

			//登陆验证
			checkLogin() {
				let that = this;
				if (that.openid == '' || that.openid == undefined) {
					uni.getStorage({
						key: 'user_sxz',
						success(res) {
							if (res.data.openid == '' || res.data.openid == undefined) {
								uni.showModal({
									title: '您还没有绑定微信登陆，需要点击登录/注册按钮进行登录？',
									success(res) {}
								});
							} else {
								console.log('获取到store本地数据', res);
								that.userinfoshow = true;
								that.openid = res.data.openid;
								that.rank = res.data.rank;
								that.userinfo.nickName = res.data.info.nickName;
								that.userinfo.avatarUrl = res.data.info.avatarUrl;
								//开始请求余额接口
								uni.request({
									url:"https://zback.shixiaozhu.work/ShixiaozhuTest/user/getUserMoney?openid="+that.openid,
									success(res) {
										if(res.data.status==200){
											that.money = res.data.data
										}
									}
								})
							}
						},
						fail(res) {
							console.log('获取失败', res);
							uni.showModal({
								title: '您还没有绑定微信登陆，需要点击登录/注册按钮进行登录？',
								success(res) {}
							});
							return;
						}
					});
				
				}else{
					//开始请求余额接口
					uni.request({
						url:"https://zback.shixiaozhu.work/ShixiaozhuTest/user/getUserMoney?openid="+that.openid,
						success(res) {
							if(res.data.status==200){
								that.money = res.data.data
							}
						}
					})
				}
			},
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			// getUserProfile(event) {
			// 	let that = this;
			// 	if (!this.userinfoshow) {
			// 		uni.login({
			// 			success: (res) => {
			// 				that.login({code: res.code})
			// 			},
			// 		});
			// 		//开始进行微信操作
			// 		//请求后段
			// 		// var url = 'https://zback.shixiaozhu.work/ShixiaozhuTest/user/weixinGetCodeShixaozhu';
			// 		// window.location.href = url;
			// 		// })
			// 	} else {
			// 		uni.showModal({
			// 			title: '您已登陆'
			// 		});
			// 	}
			// },
			getUserProfile(event) {
			    let that = this;
			    if (!this.userinfoshow) {
			     if(app.globalData.type == 'weixin'){
			      uni.login({
			       success: (res) => {
			        that.login({code: res.code})
			       },
			      });
			     }else{
			      // 开始进行微信操作
			      // 请求后段
			      var url = 'https://zback.shixiaozhu.work/ShixiaozhuTest/user/weixinGetCodeShixaozhu';
			      window.location.href = url;
			     }
			     
			    } else {
			     uni.showModal({
			      title: '您已登陆'
			     });
			    }
			   },
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}
				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #f3f4f6;
	}
	.container{
		margin: 0rpx 24rpx 0;
		.boxFooter{
			width: 100%;
			height: 184rpx;
			margin-top: 16rpx;
			background-color: #fff;
			box-shadow: 0px 8rpx 8rpx rgba(0, 0, 0, 0.05);
			border-radius: 12rpx;
			display: flex;
			flex-direction: row;
			.item{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 54rpx!important;
					height: 54rpx!important;
				}
				.txt{
					font-size: 20rpx;
					color: #555556;
				}
			}
		}
		.riceCard{
			width: 100%;
			overflow: hidden;
			margin-top: 16rpx;
			// box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}
		.compilations{
			display: flex;
			flex: row;
			justify-content: space-between;
			.common{
				border-radius: 16rpx;
				width: 48%;
				height: 168rpx;
				background-color: #000;
				box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.05);
				background: linear-gradient(172.85deg, rgba(255, 109, 77, 0.2) 2.03%, rgba(255, 174, 150, 0) 21.14%), #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0 38rpx;
				image{
					width:80rpx;
				}
				.txt{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.t1{
						font-weight: 700;
						font-size: 30rpx;
						margin-top: -10rpx;
					}
					.t2{
						color: rgba(169, 169, 169, 1);
						font-size: 20rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
	.service-box {
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0rpx 1rpx 3rpx 1rpx rgba(0, 0, 0, 0.07);
		padding: 32rpx 30rpx 10rpx;
		border-radius: 10rpx;
		.row {
			display: flex;
			flex-wrap: wrap;
			color: #aaaaaa;
			padding-bottom: -40rpx;

			.grid {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				width: 25%;
				position: relative;

				.image {
					image {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 20rpx;
					}
				}
				.new-badage {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 0;
					right: 30rpx;
				}
			}
		}
	}
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10rpx;
	}
	.user-section {
		position: relative;
		width: 100%;
		height: 240rpx;
		    
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
		}
	}
	.user-info-box {
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
		.username {
			font-size: 40rpx;
			color: $font-color-dark;
			margin-left: 20rpx;
			font-weight: bold;
		}
		.portrait-box{
			position: absolute;
			top: 0;
			left: 30rpx;
			width: 196rpx;
			height: 196rpx;
			border-radius: 12rpx;
			z-index: 99;
			background-color: #e6e6e6;
			box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
			image{
				width: 100%;
				height: 100%;
			}
		}
		.info-box{
			position: absolute;
			bottom: 0;
			height: 180rpx;
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx;
			box-shadow: 0px 4rpx 14rpx rgba(0, 0, 0, 0.05);
			overflow: hidden;
			.username{position: absolute;
			top: 34rpx;
			left: 244rpx;
				font-size: 30rpx;
			}
		}
	}
	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240rpx;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20rpx 24rpx;
		.card-bg {
			position: absolute;
			border-radius: 50%;
			top: 20rpx;
			left: 10rpx;
			width: 100rpx;
			height: 100rpx;
		}
		.b-btn {
			position: absolute;
			right: 20rpx;
			top: 16rpx;
			width: 132rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 22rpx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(to right, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit {
			font-size: 26rpx;
			color: #f7d680;
			margin-bottom: 28rpx;
			margin-left: 100rpx;

			[class*='hxicon-'] {
				color: #f6e5a3;
				margin-right: 16rpx;
			}
		}
		.e-b {
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10rpx;
		}
	}
	.cover-container {
		background: $page-color-base;
		// margin-top: -150rpx;
		padding: 0 30rpx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20rpx;

		.arc {
			position: absolute;
			left: 0;
			top: -34rpx;
			width: 100%;
			height: 36rpx;
		}
	}

	.tj-sction {
		width: 100%;
		height: 146rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(0, 0, 0, 0.05);
		// @extend %section;
		background: linear-gradient(206.72deg, rgba(255, 109, 77, 0.2) -10.62%, rgba(255, 174, 150, 0) 51.51%), #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		margin-top: 18rpx;
		.tj-item{
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.num{
				font-weight: 700;
				font-size: 40rpx;
				color: #fd6234;
			}
			.text-black{
				font-size: 24rpx;
				color: #000;
				margin-top: 8rpx;
			}
		}
		.tj-item:not(:last-child)::after{
			content: '';
			position: absolute;
			right: 0rpx;
			top: 17rpx;
			width: 1rpx;
			height: 112rpx;
			margin: 0 10rpx;
			background-color: #D9D9D9;
			
		}
	}
	
	
	.order-section {
		@extend %section;
		padding: 28rpx 0;
		margin-top: 20rpx;

		.order-item {
			@extend %flex-center;
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			font-size: $font-sm;
			color: $font-color-dark;
		}

		[class*='hxicon-'] {
			font-size: 48rpx;
			margin-bottom: 18rpx;
			color: #ffd21c;
		}

		.icon-shouhoutuikuan {
			font-size: 44rpx;
		}
	}

	.history-section {
		padding: 30rpx 0 0;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 10rpx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40rpx;
			margin-left: 30rpx;

			[class*='hxicon-'] {
				font-size: 44rpx;
				color: #5eba8f;
				margin-right: 16rpx;
				line-height: 40rpx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30rpx 30rpx 0;

			image {
				display: inline-block;
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>
